var date = new Date();
laydate.render({
    elem: '#searchTimeDay',
    max: 'date'
});

$(function () {
    initChart();
    loadData();
})

function loadData() {
    chartNoDataHintHide($('#chart_pie2'));
    chartNoDataHintHide($('#chart_pie1'));
    chartNoDataHintHide($('#chart_bar1'));
    chartNoDataHintHide($('#chart_bar2'));
    loadAlarmStatisticsOfTheDay();
    AlarmHandlingInformation();
    reasonForAlarm();
    loadAlarmGroupBayDeviceType();
}

/*加载当日告警统计*/
function loadAlarmStatisticsOfTheDay() {
    showLoading(LOADING);
    getJson("/alarm/getCountAlarmsByHour", {dateStr: $('#searchTimeDay').val()}, 'GET', function (result) {
        if (result['code'] == 200) {
            var data = result['payload']['data'];
            if (data.length == 0) {
                chartNoDataHint($('#chart_bar1'));
            }
            var xArr = new Array();
            var toDay = new Array();
            var yesterDay = new Array();
            data.map(function (item) {
                xArr.push(item['hour']);
                toDay.push(item['toDay']);
                yesterDay.push(item['yesterDay']);
            });
            if(toDay.length==0&&yesterDay.length==0){
                xArr = new Array();
            }
            chart_bar1.setOption({
                xAxis: {
                    data: xArr
                },
                series: [{
                    data: toDay,
                }, {
                    data: yesterDay,
                }]
            });
        } else {
            myAlert("提示", data['message']);
        }
        hideLoading();
    })
}

/*当日告警处理信息*/
function AlarmHandlingInformation() {
    showLoading(LOADING);
    getJson("/alarm/countToDayAlarmNumber", {dateStr: $('#searchTimeDay').val()}, 'GET', function (result) {
        if (result['code'] == 200) {
            var data = result['payload']['data'];
            /*总数*/
            var total = 0;
            /*未处理*/
            var untreated = 0;
            /*未恢复*/
            var notRestore = 0;
            /*以恢复*/
            var restored = 0;
            data.map(function (item) {
                if (item['status'] == 1) {
                    untreated = item['count'];
                } else if (item['status'] == 2) {
                    notRestore = item['count'];
                } else if (item['status'] == 3) {
                    restored = item['count'];
                }
                total = untreated + notRestore + restored;
            });
            chart_bar2.setOption({ //当日告警处理信息
                xAxis: {
                    data: ['总告警量', '未处理', '未恢复', '已恢复'],
                    type: 'category',
                },
                series: [{
                    name: '数量',
                    type: 'bar',
                    stack: '总量',
                    data: [0, total - untreated, total - notRestore, 0]
                }, {
                    name: '数量',
                    type: 'bar',
                    stack: '总量',
                    barWidth: 84,
                    data: [total, untreated, notRestore, restored]
                }]
            });
        } else {
            myAlert("提示", data['message']);
        }
        hideLoading();
    })

}

/*告警原因分布*/
function reasonForAlarm() {
    showLoading(LOADING);
    getJson("/alarm/getAlarmNumberGroupByContent", {dateStr: $('#searchTimeDay').val()}, 'GET', function (result) {
        var data = result['payload']['data'];
        if (data.length == 0) {
            chartNoDataHint($('#chart_pie1'));
        }
        var list = new Array();
        var total = Number(0);
        data.map(function (item) {
            var innerData = {};
            total += item['count'];
            innerData.value = item['count'];
            innerData.name = item['content'];
            list.push(innerData);
        });
        chart_pie1.setOption({//告警原因分布&告警设备类型
            title: {
                text: total,//这里设置环中心数量
            },
            series: [{
                data: list
            }]
        });
        hideLoading();
    });
}

/*告警设备类型*/
function loadAlarmGroupBayDeviceType() {
    showLoading(LOADING);
    getJson("/alarm/getAlarmDeviceType", {dateStr: $('#searchTimeDay').val()}, 'GET', function (result) {
        var data = result['payload']['data'];
        var total = result['payload']['count'].length;
        if (data.length == 0) {
            chartNoDataHint($('#chart_pie2'));
        }
        var list = new Array();
        data.map(function (item) {
            var innerData = {};
            innerData.value = item['count'];
            innerData.name = item['typeName'];
            list.push(innerData);
        });
        chart_pie2.setOption({//告警原因分布&告警设备类型
            title: {
                text: total,//这里设置环中心数量
            },
            series: [{
                data: list
            }]
        });
        hideLoading();
    });
}

function initChart() {
    chart_bar1.setOption(option_bar1);
    chart_bar2.setOption(option_bar2);
    chart_pie1.setOption(option_pie);
    chart_pie2.setOption(option_pie);
    chart_pie2.setOption({
        title: {
            text: '100',//这里设置环中心数量
            subtext: '总设备',
            left: 303
        },
        legend: {
            left: 630
        },
        series: {
            center: ['310', '50%'],
            data: [],
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            emphasis: {
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                }
            }
        }
    });
}

var chart_bar1 = echarts.init(document.getElementById('chart_bar1'));//当日告警统计
var chart_bar2 = echarts.init(document.getElementById('chart_bar2'));//当日告警处理信息
var chart_pie1 = echarts.init(document.getElementById('chart_pie1'));//告警原因分布
var chart_pie2 = echarts.init(document.getElementById('chart_pie2'));//告警设备类型
var option_bar1 = { //当日告警统计
    color: ['#FF7931', '#FAD488'],
    legend: {
        right: 16,
        top: 0,
        icon: 'circle',
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 16,
        textStyle: {
            color: '#fff',
            fontSize: 14
        }
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(59, 85, 159, 0.3)'
            }
        },
        backgroundColor: 'rgba(39, 71, 105, 0.7)'
    },
    grid: {
        top: 48,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
    },
    xAxis: {
        data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
        type: 'category',
        axisLine: {
            lineStyle: {
                color: 'rgba(209, 230, 249, 0.7)'
            }
        },
        axisLabel: {
            color: 'rgba(209, 230, 249, 0.7)'
        },
        axisTick: {
            lineStyle: {
                color: 'rgba(209, 230, 249, 0.7)'
            }
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        name: '次',
        nameTextStyle: {
            color: '#fff'
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#fff'
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: ['rgba(22, 126, 226, 0.2)'],
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '今日',
        type: 'bar',
        data: randomFun(24, 0, 100, 0),
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#FF7931'},
                    {offset: 1, color: 'rgba(255,121,49,0.03)'}
                ]
            )
        }
    }, {
        name: '昨日',
        type: 'bar',
        data: randomFun(24, 0, 100, 0),
        itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1,
                [
                    {offset: 0, color: '#FAD488'},
                    {offset: 1, color: 'rgba(250,212,136,0)'}
                ]
            )
        }
    }]
};
var option_bar2 = { //当日告警处理信息
    color: ['#F1963A'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow',
            shadowStyle: {
                color: 'rgba(59, 85, 159, 0.3)'
            }
        },
        backgroundColor: 'rgba(39, 71, 105, 0.7)',
        formatter: function (params) {
            var tar = params[1];
            return tar.name + ' : ' + tar.value;
        }
    },
    grid: {
        top: 48,
        left: 0,
        right: 0,
        bottom: 0,
        containLabel: true
    },
    xAxis: {
        data: ['总告警量', '未处理', '未恢复', '已恢复'],
        type: 'category',
        axisLine: {
            lineStyle: {
                color: 'rgba(209, 230, 249, 0.7)'
            }
        },
        axisLabel: {
            color: 'rgba(209, 230, 249, 0.7)'
        },
        axisTick: {
            lineStyle: {
                color: 'rgba(209, 230, 249, 0.7)'
            }
        },
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        name: '次',
        nameTextStyle: {
            color: '#fff'
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: '#fff'
        },
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                color: ['rgba(22, 126, 226, 0.2)'],
                type: 'dashed'
            }
        }
    },
    series: [{
        name: '数量',
        type: 'bar',
        stack: '总量',
        itemStyle: {
            barBorderColor: 'rgba(0,0,0,0)',
            color: 'rgba(0,0,0,0)'
        },
        emphasis: {
            itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
            }
        },
        data: [0, 72, 44, 8]
    }, {
        name: '数量',
        type: 'bar',
        stack: '总量',
        barWidth: 84,
        label: {
            show: true,
            position: 'inside',
            fontSize: 14,
            fontFamily: 'DIN-Bold'
        },
        data: [88, 16, 28, 36]
    }]
};
var option_pie = {//告警原因分布&告警设备类型
    title: {
        text: '100',//这里设置环中心数量
        left: '277',
        top: '160',
        textStyle: {
            color: '#00E3D2',
            fontSize: 32,
            fontFamily: 'DIN-Bold'
        },
        subtext: '今日总告警',
        subtextStyle: {
            color: '#fff',
            fontSize: 18,
            fontWeight: 400,
        },
        itemGap: 16,
        textAlign: 'center'
    },
    color: ['#F8DD83', '#718BF3', '#FF7931', '#5DDF91', '#0096FF'],
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
        backgroundColor: 'rgba(39, 71, 105, 0.7)'
    },
    legend: {
        type: 'scroll',
        pageIconInactiveColor: '#2f4554',
        pageIconColor: '#0056d4',
        pageIconSize: 14,
        pageTextStyle: {
            color: '#aaa'
        },
        left: 596,
        top: 'middle',
        icon: 'rect',
        orient: 'vertical',
        itemHeight: 14,
        itemWidth: 14,
        itemGap: 10,
        textStyle: {
            color: '#83D0EF',
            fontSize: 14,
            padding: [0, 5]
        }
    },
    series: [{
        name: '告警数量',
        type: 'pie',
        radius: [86, 120],
        center: ['284', '50%'],
        label: {
            formatter: '{white|{b}:}{c}',
            lineHeight: 20,
            fontSize: 14,
            rich: {
                white: {
                    color: '#fff',
                    fontSize: 14
                }
            },
            distanceToLabelLine: 10
        },
        labelLine: {
            length: 20,
            length2: 0
        },
        data: []
    }]
};